<template>

  <div class="container">
    <div class="sort-wrap">
      <div class="sort-item" style="" @click="byDefault">默认</div>
      <div class="sort-item" @click="byTime">上传时间<i v-show="query.timeAsc"
                                                    class="el-icon-caret-top"></i><i
        v-show="query.timeDesc" class="el-icon-caret-bottom"></i></div>
      <div class="sort-item" @click="byReleaseTime">上映时间<i v-show="query.releaseAsc"
                                                           class="el-icon-caret-top"></i><i
        v-show="query.releaseDesc" class="el-icon-caret-bottom"></i></div>
      <div class="sort-item" @click="byScore">评分<i v-show="query.scoreAsc"
                                                   class="el-icon-caret-top"></i><i
        v-show="query.scoreDesc" class="el-icon-caret-bottom"></i></div>
    </div>

    <div id="scroll" class="scroll-view" v-infinite-scroll="getByCategory" infinite-scroll-distance="30"
         infinite-scroll-delay="500"
         infinite-scroll-immediate="false"
         :infinite-scroll-disabled="finished">
      <div class="movie-item-wrap">
        <div @click="toDetail(item.id)" v-for="item in list" class="movie-item" style="">
          <img class="movie-img" :src="item.imgUrl" :onerror="errorimg"/>
          <div class="title">{{item.title}}
          </div>
          <div class="score">{{item.scoreDouban|scoreFilter}}</div>
        </div>
      </div>
      <div v-if="loading" class="tips">加载中...</div>
      <div v-if="finished" class="tips">没有更多了</div>
      <div v-if="err" @click="getByCategory" class="tips">
        加载失败，点击重试
      </div>

    </div>

    <div @click="showCategory" class="category-btn"
         style="">
      <i style="font-size: 30px" class="el-icon-menu"></i></div>

    <van-popup v-model="categoryShow" position="top" :style="{ height:'auto'}">
      <div class="category-item-wrap" style="">
        <div @click="changeCategory(item.id)" :key="item.id" :class="item.id===categoryIndex?'hover':''"
             v-for="item in categoryList"
             class="category-item">
          {{item.title}}
        </div>
        <van-checkbox style="margin-left: 20px" checked-color="black" @change="changeIslow" v-model="query.checked">
          烂片也不放过
        </van-checkbox>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import {getByParam, getByCategory} from '@/api/movie'
  import {getCategoryList} from '@/api/category'
  import Pagination from '@/components/Pagination'
  import {getStore, removeStore, setStore} from '@/utils/storage'

  export default {
    name: 'Home',
    components: {Pagination},
    data() {
      return {
        err: false,
        categoryIndex: 0,
        errorimg: 'this.src="' + require('@/assets/err_img.png') + '"',
        categoryList: [],
        categoryShow: false,
        loading: false,
        finished: false,
        query: {
          checked: false,
          timeDesc: true,
          timeAsc: false,
          scoreDesc: false,
          scoreAsc: false,
          releaseAsc: false,
          releaseDesc: false,
          sortField: "create_time",
          sortOrder: "desc",
          curPage: 1,
          pageSize: 20,
          isLow: 2, //只查大于7.5的
          isExpired: false//只查云盘链接可用的
        },
        total: 0,
        list: []
      }
    },
    computed: {},
    created() {
      let params = getStore("params", this.query);
      if (params) {
        this.query = JSON.parse(params);
      }
      this.getCategoryList();
      this.getByCategory();
      // this.getByParam();
    },
    activated() {
      console.log("设置", this.scrollTop)
      document.getElementById('scroll').scrollTop = this.scrollTop // 设置滚动条位置
    },
    filters: {
      scoreFilter(score) {
        if (score === null || score === '') {
          return "未知";
        } else {
          return score;
        }
      }
    },

    methods: {
      changeCategory(categoryId) {
        this.resetPage();
        this.categoryIndex = categoryId;
        this.categoryShow = false;
        this.list = [];
        this.query.categoryId = categoryId;
        this.getByCategory();

      },
      getCategoryList() {
        getCategoryList().then(r1 => {
          let tmp = [{"id": null, "title": "全部"}];
          this.categoryList = tmp.concat(r1.data)
        }).catch(err => {
          console.log("失败")
        })
      },
      showCategory() {
        this.categoryShow = true;
      },
      resetPage() {
        this.query.curPage = 1;
      },
      changeIslow(e) {
        this.list = [];
        console.log("设置isLow", e)
        if (e) {
          this.query.isLow = null;
        } else {
          this.query.isLow = 2;
        }
        // setStore("isLowChecked",e);
        this.categoryShow = false;
        this.resetPage();
        this.getByCategory();
      },
      byDefault() {
        this.list = [];
        this.query.sortField = null;
        this.query.sortOrder = null;
        this.clear();
        this.getByCategory();
      },
      byTime() {
        this.list = [];
        // console.log("test",this.query.timeAsc,this.query.timeDesc)
        if (!this.query.timeAsc && !this.query.timeDesc) {
          this.clear();
          this.query.timeDesc = true;
          this.query.sortField = "create_time";
          this.query.sortOrder = "desc";
          this.getByCategory();
          return;
        }
        if (this.query.timeAsc) {
          this.clear();
          this.query.timeDesc = true;
          this.query.sortField = "create_time";
          this.query.sortOrder = "desc";
          this.getByCategory();
          return;
        }
        if (this.query.timeDesc) {
          this.clear();
          this.query.timeAsc = true;
          this.query.sortField = "create_time";
          this.query.sortOrder = "asc";
          this.getByCategory();
          return;
        }
      },
      byReleaseTime() {
        this.list = [];
        console.log("test", this.query.releaseAsc, this.query.releaseDesc)
        if (!this.query.releaseAsc && !this.query.releaseDesc) {
          this.clear();
          this.query.releaseDesc = true;
          this.query.sortField = "real_release_time";
          this.query.sortOrder = "desc";
          this.getByCategory();
          return;
        }
        if (this.query.releaseAsc) {
          this.clear();
          this.query.releaseDesc = true;
          this.query.sortField = "real_release_time";
          this.query.sortOrder = "desc";
          this.getByCategory();

          return;
        }
        if (this.query.releaseDesc) {
          this.clear();
          this.query.releaseAsc = true;
          this.query.sortField = "real_release_time";
          this.query.sortOrder = "asc";
          this.getByCategory();
          return;
        }
      },
      byScore() {
        this.list = [];
        if (!this.query.scoreAsc && !this.query.scoreDesc) {
          this.clear();
          this.query.scoreDesc = true;
          this.query.sortField = "score_douban";
          this.query.sortOrder = "desc";
          this.getByCategory();
          return;
        }
        if (this.query.scoreAsc) {
          this.clear();
          this.query.scoreDesc = true;
          this.query.sortField = "score_douban";
          this.query.sortOrder = "desc";
          this.getByCategory();
          return;
        }
        if (this.query.scoreDesc) {
          this.clear();
          this.query.scoreAsc = true;
          this.query.sortField = "score_douban";
          this.query.sortOrder = "asc";
          this.getByCategory();
          return;
        }
      },
      clear() {
        this.resetPage();
        this.query.scoreAsc = false;
        this.query.scoreDesc = false;
        this.query.timeDesc = false;
        this.query.timeAsc = false;
        this.query.releaseAsc = false;
        this.query.releaseDesc = false;
      },
      getByParam() {
        this.finished = false;
        // setStore("params", this.query);
        this.loading = true;
        getByParam(this.query).then(r1 => {
          this.query.curPage++;
          console.log("加载：", this.query.curPage)
          // console.log("records:", r1.data.records)
          this.list = this.list.concat(r1.data.records);
          // console.log("list:", this.list)
          this.loading = false;

          // 数据全部加载完成
          if (this.list.length >= r1.data.total) {
            this.finished = true;
          }
          this.total = r1.data.total;
        }).catch(err => {
          this.loading = false;
          console.log("失败")
        })
      },
      getByCategory() {
        this.finished = false;
        console.log("分类id", this.query.categoryId)
        this.loading = true;
        getByCategory(this.query).then(r1 => {
          this.query.curPage++;
          this.list = this.list.concat(r1.data.records);
          this.loading = false;
          // console.log("分类数据",r1.data);
          // 数据全部加载完成
          if (this.list.length >= r1.data.total) {
            this.finished = true;
          }
          this.total = r1.data.total;
        }).catch(err => {
          this.loading = false;
          console.log("失败", err)
        })
      },

      toDetail(id) {
        this.scrollTop = document.getElementById('scroll').scrollTop
        this.$router.push({path: '/movie/detail/' + id})
      },

    }
  }
</script>

<style scoped>
  .hover {
    background-color: black;
    color: white;
  }

  .score {
    font-size: 16px;
    position: absolute;
    right: 30px;
    top: 205px;
    background-color: #99CC33;
    color: white;
    width: 50px;
    border-radius: 10px;
    text-align: center;
    height: 22px;
    line-height: 22px;
  }

  .container {
    height: calc(100vh - 60px);
    background-color: white;
    margin-top: 60px;
  }

  .scroll-view {
    height: calc(100vh - 104px);
    overflow: auto;
  }

  .title {
    margin-top: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    width: 100%;
    text-align: center;
    overflow: hidden;
    height: 40px;
  }

  .sort-wrap {
    display: flex;
    background-color: white;
    padding: 10px 0;
    height: 24px
  }

  .sort-item {
    width: 25%;
    text-align: center
  }

  .movie-item-wrap {
    display: flex;
    flex-wrap: wrap;
    background-color: white;
  }

  .movie-item {
    border: 1px dotted #dedede;
    width: 50%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 30px 20px 20px 20px;
    position: relative;
    -moz-box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
  }

  .movie-img {
    width: 90%;
    height: 200px
  }

  .tips {
    text-align: center;
    padding: 8px;
    color: #919191;
    font-size: 14px
  }

  .category-btn {
    border: 1px solid #ececec;
    box-shadow: 2px 2px 5px #dedede;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 20px;
    bottom: 20px;
    background-color: white;
    border-radius: 50%;
    height: 50px;
    width: 50px
  }

  .category-item {
    border: 1px solid #cccccc;
    padding: 10px;
    border-radius: 5px;
    margin-left: 5px;
    margin-bottom: 8px
  }

  .category-item-wrap {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    align-items: center
  }
</style>
